<#-- 定义hasAnyManyEditFields变量 -->
<#assign hasAnyManyEditFields = false>
<#list po.relManyList as rel>
<#if rel.editable>
  <#assign hasAnyManyEditFields = true>
</#if>
</#list>
<template>
  <section>
    <el-form ref="form" :model="edit" :rules="rules" label-width="150px" class="form">
      <el-row>
<#list po.editFields as field>
        <el-col :span="${field.tagSize!12}">
          <el-form-item :label="$t('${field.title}')"<#if field.required> :required="true"</#if> prop="${field.relName}">
          <#if field.tag??>
          <${field.tag} ref="${field.relName}" v-model="edit${(field.modelName == po.name)?then('', '.' + field.modelName)}.${field.relName}" :disabled="readonly" :placeholder="$t('请选择')"${field.tagAttrs!""} name="${field.relName}" />
          <#elseif field.dataSourceType?? && field.dataSourceType == "code">
            <el-select ref="${field.relName}" v-model="edit.${(field.modelName == po.name)?then('', '.' + field.modelName)}.${field.relName}" :disabled="readonly" :placeholder="$t('请选择')" name="${field.relName}">
              <el-option v-for="(value, key) in ${field.relName}Dict" :key="key" :label="value" :value="key"/>
            </el-select>
          <#elseif field.date>
            <el-date-picker
              ref="${field.relName}"
              v-model="edit${(field.modelName == po.name)?then('', '.' + field.modelName)}.${field.relName}"
              :disabled="readonly"
              format="yyyy-MM-dd HH:mm:ss"
              type="date"
              name="${field.relName}"
            />
          <#elseif field.number>
            <el-input-number
              ref="${field.relName}"
              v-model="edit${(field.modelName == po.name)?then('', '.' + field.modelName)}.${field.relName}"
              :controls="false"
              :disabled="readonly"
              :precision="${field.precision!2}"
              :min="${field.min!0.01}"
              :max="${field.max!99999999?string("####")}"
              name="${field.relName}"
              size="small"
              style="width: 100%"
            />
          <#else>
            <el-input
              ref="${field.relName}"
              v-model="edit${(field.modelName == po.name)?then('', '.' + field.modelName)}.${field.relName}"
              :disabled="readonly"
              name="${field.relName}"
              maxlength="100"
            />
          </#if>
          </el-form-item>
        </el-col>
      </#list>
      </el-row>
<#if hasAnyManyEditFields>
      <el-tabs v-model="editTab" tab-position="top" name="editTab">
<#list po.relManyList as rel>
<#if rel.editable>
        <el-tab-pane :label="$t('${rel.title}')" name="${rel.name}Tab">
          <ody-list-table-area>
            <div slot="btn-bottom">
              <el-button v-show="!readonly" code="ui" size="small" type="primary" @click="handleAdd${rel.name}">{{ $t('添加') }}</el-button>
            </div>
            <div slot="table">
              <el-table :data="edit.${rel.uncapName}List">
                <#list rel.editFields as field>
                <el-table-column width="180">
                  <template slot="header">
                    <#if field.required><ody-tip-star :content="$t('${field.title}')"/><#else>{{ $t('${field.title}') }}</#if>
                  </template>
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'${rel.uncapName}List.' + scope.$index + '.${field.relName}'"<#if field.required> :rules="{ required: true, message: $t('${field.title}') + $t('不能为空'), trigger: 'blur'}"</#if>
                      label-width="0px">
                      <#if field.tag??>
                      <${field.tag} ref="${rel.name}_${field.relName}" v-model="scope.row.${field.name}" :disabled="readonly" :placeholder="$t('请选择')"${field.tagAttrs!""} name="${rel.name}_${field.relName}" />
                      <#elseif field.dataSourceType?? && field.dataSourceType == "code">
                        <el-select ref="${rel.name}_${field.relName}" v-model="scope.row.${field.name}" :disabled="readonly" :placeholder="$t('请选择')" name="${rel.name}_${field.relName}">
                          <el-option v-for="(value, key) in ${field.relName}Dict" :key="key" :label="value" :value="key"/>
                        </el-select>
                      <#elseif field.date>
                        <el-date-picker
                          ref="${rel.name}_${field.relName}"
                          v-model="scope.row.${field.name}"
                          :disabled="readonly"
                          format="yyyy-MM-dd HH:mm:ss"
                          type="date"
                          name="${rel.name}_${field.relName}"
                        />
                      <#elseif field.number>
                        <el-input-number
                          ref="${rel.name}_${field.relName}"
                          v-model="scope.row.${field.name}"
                          :controls="false"
                          :disabled="readonly"
                          :precision="${field.precision!2}"
                          :min="${field.min!0.01}"
                          :max="${field.max!99999999?string("####")}"
                          name="${rel.name}_${field.relName}"
                          size="small"
                          style="width: 100%"
                        />
                      <#else>
                        <el-input
                          ref="${rel.name}_${field.relName}"
                          v-model="scope.row.${field.name}"
                          :disabled="readonly"
                          name="${rel.name}_${field.relName}"
                          maxlength="100"
                        />
                      </#if>
                      </el-form-item>
                  </template>
                </el-table-column>
                </#list>
                <el-table-column :label="$t('操作')">
                  <template slot-scope="scope">
                    <el-form-item label-width="0px">
                      <el-button
                        v-show="!readonly"
                        size="mini"
                        @click="handleDel${rel.name}(scope.$index, scope.row)">{{ $t('删除') }}</el-button>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </ody-list-table-area>
        </el-tab-pane>
</#if>
</#list>
      </el-tabs>
</#if>
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-button name="back" size="small" @click="back">{{ $t('关闭') }}</el-button>
        <ody-button v-loading="saving" v-permission="['${po.name}_add', '${po.name}_update']" v-show="!readonly" name="${po.name}_save" code="ui" size="small" type="primary" @click="save">{{ $t('保存') }}</ody-button>
      </el-row>
    </el-form>
  </section>
</template>

<script>
export default {
  name: '${po.name}Detail',
  data() {
    return {
      saving: false,
      readonly: false,
      update: false,
      edit: this.initData(),
<#if hasAnyManyEditFields>
      editTab: <#list po.relManyList as rel><#if rel.editable>"${rel.name}Tab"<#break></#if></#list>,
</#if>
      <#list po.editFields as field>
      <#if field.dataSourceType?? && field.dataSourceType == "code">
      ${field.relName}Dict: {},
      </#if>
      </#list>
      rules: {
        <#assign total = 0>
        <#assign count = 0>
        <#list po.editFields as field>
        <#if field.required>
        <#assign total = total + 1>
        </#if>
        </#list>
        <#list po.editFields as field>
        <#if field.required>
        <#assign count = count + 1>
        ${field.relName}: [{ required: true, message: this.$t('请输入') + this.$t('${field.title}') }]<#if count lt total>,</#if>
        </#if>
        </#list>
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.readonly = (typeof this.$route.query.readonly === 'boolean') ? this.$route.query.readonly : (this.$route.query.readonly !== 'false')
      if (this.$route.query.id) {
        this.update = !this.readonly
        this.saving = true
        const res = await this.$${poolName}.$api.${po.uncapName}.getById({ id: this.$route.query.id })
        this.saving = false
        this.edit = res.data
      } else {
        this.edit = this.initData()
      }
      <#-- 判断是否含有字典 -->
      <#list po.editFields as field>
      <#if field.dataSourceType?? && field.dataSourceType == "code">
      <#assign hasAnyDict = true>
      <#break>
      </#if>
      </#list>
      <#-- 是否含有字典 -->
      <#if hasAnyDict??>
      const categories = []
      <#list po.editFields as field>
      <#if field.dataSourceType?? && field.dataSourceType == "code">
      categories.push('${field.dataSourceKey}')
      </#if>
      </#list>
      const res = await this.$${poolName}.$api.common.codeListMulti({ 'categories': categories })
      <#list po.editFields as field>
      <#if field.dataSourceType?? && field.dataSourceType == "code">
      this.${field.relName}Dict = res.data['${field.dataSourceKey}']
      </#if>
      </#list>
      </#if>
    },
    initData() {
      return {
        <#-- 主表字段 -->
        <#list po.editFields as field>
        <#if field.modelName == po.name>
        <#if field.number>
        ${field.relName}: 0,
        <#else>
        ${field.relName}: null,
        </#if>
        </#if>
        </#list>
        <#-- 一对一关联字段 -->
        <#list po.relOneList as rel>
        <#if rel.editable>
        ${rel.name}: {
          <#list po.editFields as field>
          <#if field.modelName == rel.name>
          <#if field.number>
          ${field.relName}: 0<sep>,</sep>
          <#else>
          ${field.relName}: null<sep>,</sep>
          </#if>
          </#if>
          </#list>
        },
        </#if>
        </#list>
        <#-- 一对多关联字段 -->
        <#list po.relManyList as rel>
        <#if rel.editable>
        ${rel.uncapName}List: [],
        </#if>
        </#list>
        id: null
      }
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.saving = true
          const api = this.edit.id ? this.$${poolName}.$api.${po.uncapName}.update : this.$${poolName}.$api.${po.uncapName}.add
          api(this.edit).then((res) => {
            this.saving = false
            this.$alert(this.$t('保存成功'), this.$t('系统信息'), {
              confirmButtonText: this.$t('确定'),
              callback: action => {
                this.back()
              }
            })
          }, (res) => {
            this.saving = false
          })
        }
      })
    },
    <#list po.relManyList as rel>
    <#if rel.editable>
    handleAdd${rel.name}() {
      this.edit.${rel.uncapName}List.push({
        <#list rel.editFields as field>
        <#if field.number>
        ${field.relName}: 0<#sep>,</#sep>
        <#else>
        ${field.relName}: null<#sep>,</#sep>
        </#if>
        </#list>
      })
    },
    async handleDel${rel.name}(index, row) {
      const confirm = await this.$confirm(
        this.$t('是否删除当前行数据'),
        this.$t('common_prompt')
      )
      if (confirm) {
        this.edit.${rel.uncapName}List.splice(index, 1)
      }
    },
    </#if>
    </#list>
    back() {
      this.$portal.delActiveViewAndRefresh()
    }
  }
}
</script>

